import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

// 导入页面组件
import HomePage from '@/views/HomePage.vue'
import WelcomePage from '@/views/WelcomePage.vue'
import ChatPage from '@/views/ChatPage.vue'

// 路由配置
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: HomePage,
    children: [
      {
        path: '',
        name: 'Welcome',
        component: WelcomePage,
        meta: {
          title: '欢迎页面',
          description: '聊天界面系统欢迎页面'
        }
      },
      {
        path: 'chat',
        name: 'Chat',
        component: ChatPage,
        meta: {
          title: '聊天界面',
          description: '主要的聊天界面，包含消息历史、输入框和客户信息'
        }
      },
      {
        path: 'contacts',
        name: 'Contacts',
        component: () => import('@/views/ContactsPage.vue'),
        meta: {
          title: '联系人',
          description: '管理客户联系人信息'
        }
      },
      {
        path: 'history',
        name: 'History',
        component: () => import('@/views/HistoryPage.vue'),
        meta: {
          title: '聊天记录',
          description: '查看历史聊天记录'
        }
      },
      {
        path: 'demo',
        children: [
          {
            path: 'layout',
            name: 'LayoutDemo',
            component: () => import('@/views/demo/LayoutDemo.vue'),
            meta: {
              title: '响应式布局演示',
              description: '展示响应式布局在不同设备上的表现'
            }
          },
          {
            path: 'components',
            name: 'ComponentsDemo',
            component: () => import('@/views/demo/ComponentsDemo.vue'),
            meta: {
              title: 'UI 组件演示',
              description: '展示各种 UI 组件的使用方法'
            }
          },
          {
            path: 'themes',
            name: 'ThemesDemo',
            component: () => import('@/views/demo/ThemesDemo.vue'),
            meta: {
              title: '主题系统演示',
              description: '展示不同主题和密度设置的效果'
            }
          }
        ]
      },
      {
        path: 'settings',
        name: 'Settings',
        component: () => import('@/views/SettingsPage.vue'),
        meta: {
          title: '系统设置',
          description: '配置系统参数和用户偏好'
        }
      },
      {
        path: 'profile',
        name: 'Profile',
        component: () => import('@/views/ProfilePage.vue'),
        meta: {
          title: '个人资料',
          description: '管理个人信息和账户设置'
        }
      }
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/NotFoundPage.vue'),
    meta: {
      title: '页面未找到',
      description: '请求的页面不存在'
    }
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 如果有保存的滚动位置，恢复它
    if (savedPosition) {
      return savedPosition
    }
    // 否则滚动到顶部
    return { top: 0 }
  }
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 设置页面标题
  if (to.meta?.title) {
    document.title = `${to.meta.title} - Chat App`
  } else {
    document.title = 'Chat App'
  }
  
  // 设置页面描述
  if (to.meta?.description) {
    let metaDescription = document.querySelector('meta[name="description"]')
    if (!metaDescription) {
      metaDescription = document.createElement('meta')
      metaDescription.setAttribute('name', 'description')
      document.head.appendChild(metaDescription)
    }
    metaDescription.setAttribute('content', to.meta.description as string)
  }
  
  next()
})

// 全局后置钩子
router.afterEach((to, from) => {
  // 可以在这里添加页面访问统计等逻辑
  console.log(`导航到: ${to.path}`)
})

export default router